<template>
	<view class="notice-board">
		<view class="scorll-view">
			<view class="notice" :class="[animation ? 'animation' : '']">{{ notify }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		notify: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			animation: true
		};
	},
	onLoad: function(options) {
		setTimeout(() => {
			this.animation = true;
		}, 600);
	},
	methods: {}
};
</script>

<style scoped>
.notice-board {
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
}
.scorll-view {
	flex: 1;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	color: #888;
}

.notice {
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	transform: translate3d(100%, 0, 0);
}

.animation {
	-webkit-animation: rolling 12s linear infinite;
	animation: rolling 12s linear infinite;
}

@-webkit-keyframes rolling {
	0% {
		transform: translate3d(100%, 0, 0);
	}

	100% {
		transform: translate3d(-170%, 0, 0);
	}
}

@keyframes rolling {
	0% {
		transform: translate3d(100%, 0, 0);
	}

	100% {
		transform: translate3d(-170%, 0, 0);
	}
}
</style>
